---
title: Consell de l'aplicació
image: /images/user-guide/tips/light-bulb.png
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
</Frame>

Un missatge breu que mostra informació addicional quan un usuari interactua amb un element.

<Tabs>
<Tab title="Usage">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Props">

| Props            | Tipus                                        | Descripció                                                                                                                                                                                                                |
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| nomDeClasse      | cadena                                       | Classe CSS opcional per a un estil addicional                                                                                                                                                                             |
| anchorSelect     | Selector CSS                                 | Selector per a l'ancora del tooltip (l'element que activa el tooltip)                                                                                                                                  |
| contingut        | cadena                                       | El contingut que vols mostrar dins del tooltip                                                                                                                                                                            |
| delayHide        | número                                       | El retard en segons abans d'amagar el tooltip després que el cursor surti de l'ancora                                                                                                                                     |
| desplaçament     | número                                       | El desplaçament en píxels per a posicionar el tooltip                                                                                                                                                                     |
| noArrow          | boolean                                      | Si és 'cert', amaga la fletxa del tooltip                                                                                                                                                                                 |
| isOpen           | boolean                                      | Si és 'cert', el tooltip està obert per defecte                                                                                                                                                                           |
| place            | Cadena `PlacesType` de `react-tooltip`       | Especifica la col·locació del tooltip. Els valors inclouen `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, i `left-end` |
| positionStrategy | Cadena `PositionStrategy` de `react-tooltip` | Estratègia de posicionament per al tooltip. Té dos valors: `absolute` i `fixed`                                                                                                           |

</Tab>

</Tabs>

## Text desbordant amb Tooltip

Gestiona el text desbordant i mostra un tooltip quan el text desborda.

<Tabs>
<Tab title="Usage">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Props">

| Propietats | Tipus  | Descripció                                                 |
| ---------- | ------ | ---------------------------------------------------------- |
| text       | cadena | El contingut que vols mostrar en l'àrea de text desbordant |

</Tab>

</Tabs>
